<template>
  <h1 v-if="props.data.attr.type == 'h1'" :style="props.data.attr.style">{{value}}</h1>
	<h2 v-if="props.data.attr.type == 'h2'" :style="props.data.attr.style">{{value}}</h2>
	<h3 v-if="props.data.attr.type == 'h3'" :style="props.data.attr.style">{{value}}</h3>
	<h4 v-if="props.data.attr.type == 'h4'" :style="props.data.attr.style">{{value}}</h4>
	<h5 v-if="props.data.attr.type == 'h5'" :style="props.data.attr.style">{{value}}</h5>
	<h6 v-if="props.data.attr.type == 'h6'" :style="props.data.attr.style">{{value}}</h6>
</template>

<script setup>
	import { reactive, ref, computed, onMounted } from 'vue'

	const emits = defineEmits(['change']);

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		}
	})

	const value = computed({
		get: () => {
			return props.data.attr.text;
		},
		set: val => {
			emits('change', val);
		}
	})

	const _d = reactive({

	})
	
	onMounted(() => {
	
	})
</script>

<style scoped>

</style>